<template>
    <div class="flex-1 flex flex-col h-full">
        <!-- 搜索输入框 -->
        <div class="p-3 border-b border-gray-200 flex-shrink-0">
            <div class="flex space-x-2 mb-2">
                <a-input v-model="store.searchKeyword" @keyup.enter="handleSearch" size="small" placeholder="输入地址关键词..."
                    class="flex-1" />
                <a-button @click="handleSearch" :loading="store.isSearching" size="small" type="primary">
                    {{ store.isSearching ? '搜索中...' : '搜索' }}
                </a-button>
            </div>

            <!-- 默认分类和标签设置 -->
            <!-- 默认分类和标签设置 -->
            <div class="flex items-center space-x-2 mb-2">
                <span class="text-xs text-gray-600 whitespace-nowrap">默认</span>
                <a-select :model-value="store.defaultCategoryId"
                    @update:model-value="(value: any) => store.setDefaultCategory(String(value))" size="small"
                    class="flex-1">
                    <a-option v-for="category in store.addressCategories.sort((a, b) => a.order - b.order)"
                        :key="category.id" :value="category.id">
                        {{ category.name }}
                    </a-option>
                </a-select>

                <a-select :model-value="store.defaultTagId"
                    @update:model-value="(value: any) => store.setDefaultTag(String(value))" size="small"
                    class="flex-1">
                    <a-option v-for="tag in store.addressTags.sort((a, b) => a.order - b.order)" :key="tag.id"
                        :value="tag.id">
                        <div class="flex items-center space-x-2">
                            <div :style="{ backgroundColor: tag.color }" class="w-3 h-3 rounded-full"></div>
                            <span>{{ tag.name }}</span>
                        </div>
                    </a-option>
                </a-select>
            </div>

            <!-- 批量操作 -->
            <div v-if="store.searchResults.length > 0" class="flex justify-between items-center">
                <span class="text-xs text-gray-500">
                    已选择 {{ store.selectedAddresses.length }} / {{ store.searchResults.length }} 个地址
                </span>
                <div class="space-x-1">
                    <a-button @click="store.selectedAddresses = store.searchResults.map((r: any) => r.uid)" size="mini"
                        type="outline">
                        全选
                    </a-button>
                    <a-button @click="store.selectedAddresses = []" size="mini" type="outline">
                        清空
                    </a-button>
                    <a-button @click="batchAddAddresses" size="mini" type="primary"
                        :disabled="store.selectedAddresses.length === 0">
                        批量添加
                    </a-button>
                </div>
            </div>
            <p class="text-xs text-gray-500 mt-1">搜索当前地图区域内的相关地址</p>
        </div>

        <!-- 搜索结果 -->
        <div class="flex-1 overflow-y-auto">
            <div v-if="store.searchResults.length === 0 && !store.isSearching" class="p-3">
                <a-empty :description="store.searchKeyword ? '未找到相关地址' : '请输入关键词开始搜索'" />
            </div>
            <div v-else-if="store.isSearching" class="p-3 text-center text-gray-500 text-sm">
                正在搜索...
            </div>
            <div v-else class="p-3 space-y-2">
                <div v-for="(poi, index) in store.searchResults" :key="poi.uid" :id="`search-result-${index}`" :class="['border border-gray-200 rounded-md p-2 hover:bg-gray-50 text-xs cursor-pointer transition-colors',
                    store.selectedSearchResultIndex === index ? 'bg-red-50 border-red-300' : '']"
                    @click="locateSearchResult(poi, index)">
                    <div class="flex items-start space-x-2">
                        <!-- 复选框 -->
                        <a-checkbox :model-value="store.selectedAddresses.includes(poi.uid)" @update:model-value="(checked) => {
                            if (checked) {
                                store.selectedAddresses.push(poi.uid)
                            } else {
                                const index = store.selectedAddresses.indexOf(poi.uid)
                                if (index > -1) store.selectedAddresses.splice(index, 1)
                            }
                        }" @click.stop size="small" />
                        <div class="flex-1">
                            <h4 class="font-medium text-gray-900 mb-1 text-sm">{{ poi.title }}</h4>
                            <p class="text-xs text-gray-600 mb-2">{{ poi.address }}</p>
                            <div class="flex space-x-1">
                                <a-button @click.stop="addAddress(poi)" size="mini" type="primary">
                                    添加
                                </a-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import { useMapStore } from '../store'
import { addAddress, batchAddAddresses } from '../store/address'
import { clearSearchMarkers, locateSearchResult, renderAddressMarkers, renderSearchMarkers } from '../store/map'
import { handleSearch } from '../store/search'

const store = useMapStore()

// 监听搜索结果变化，重新渲染搜索标记
watch(() => store.searchResults, () => {
    if (store.map && store.activeTab === 'search') {
        renderSearchMarkers()
    }
}, { deep: true })

// 监听地址变化，重新渲染地图标记
watch(() => store.addressList, () => {
    if (store.map) {
        renderAddressMarkers()
        // 更新搜索标记
        if (store.activeTab === 'search') {
            renderSearchMarkers()
        }
    }
}, { deep: true })

// 监听tab切换
watch(() => store.activeTab, (newTab) => {
    if (newTab === 'search') {
        // 切换到搜索时，如果有搜索结果则显示搜索标记
        if (store.searchResults.length > 0) {
            renderSearchMarkers()
        }
    } else {
        // 切换到其他tab时，清除搜索标记
        clearSearchMarkers()
    }
})
</script>
